<template>
  <div class="receiptInfoSection-container">
    <div class="header">
      <div class="left-header">
        收货人信息
        <el-button type="text" @click="copyClick(1)">复制</el-button>
      </div>
      <div class="right-header">订单信息</div>
    </div>
    <div class="content">
      <div class="left-view">
        <div>
          收货人：
          <span>{{ orderDetails.receiver || '- -' }}</span>
        </div>

        <div>
          联系电话：
          <span>{{ orderDetails.receiverPhone || '- -' }}</span>
        </div>

        <div>
          收货地址：
          <span>
            {{
              `${orderDetails.receiverProvince}
               - ${orderDetails.receiverCity}
                - ${orderDetails.receiverArea}`
            }}
            {{ orderDetails.receiverAddress }}
          </span>
        </div>
      </div>
      <div class="right-view">
        <div>
          订单编号：
          <span>{{ orderDetails.orderSn || '- -' }}</span>
          <text class="copy" @click="copyClick(2)">复制</text>
        </div>

        <div>
          下单账号：
          <span>{{ orderDetails.userPhone || '- -' }}</span>
        </div>

        <div>
          下单时间：
          <span>{{ orderDetails.createTime || '- -' }}</span>
        </div>

        <div>
          付款时间：
          <span>{{ orderDetails.payTime || '- -' }}</span>
        </div>

        <div>
          发货时间：
          <span>{{ orderDetails.deliverTime || '- -' }}</span>
        </div>

        <div>
          完成时间：
          <span>{{ orderDetails.completeTime || '- -' }}</span>
        </div>

        <div>
          支付方式：
          <span>微信</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import XmCareheader from '@/components/XMC/XmCardHeader/index.vue'
  import common from '@/utils/common'
  const props = defineProps({
    orderDetails: {
      type: Object,
      default() {
        return {}
      },
    },
  })

  function copyClick(type: number) {
    let msg = ''
    if (type === 1) {
      const {
        receiver,
        receiverPhone,
        receiverProvince,
        receiverCity,
        receiverArea,
        receiverAddress,
      } = props.orderDetails
      msg = `收货人：${props.orderDetails.receiver} \n`
      msg += `联系电话：${receiverPhone} \n`
      // eslint-disable-next-line max-len
      msg += `收货地址：${receiverProvince} - ${receiverCity} - ${receiverArea} ${receiverAddress}`
    } else if (type === 2) {
      msg = props.orderDetails.orderSn
    }

    common.XmCopy(msg)
    common.XmMessage(0, '复制成功!')
  }
</script>

<style lang="scss" scoped>
  @import '@/styles/mixin.scss';
  .receiptInfoSection-container {
    @include card-shadow;
    background: white;
    margin-bottom: 20px;
    .header {
      width: 100%;
      display: flex;
      height: 39px;

      background-color: var(--el-fill-color-light);
      .left-header,
      .right-header {
        width: 50%;
        display: flex;
        align-items: center;
        margin-left: 22px;
      }
    }
    .content {
      display: flex;
      padding: 22px;
      .left-view,
      .right-view {
        width: 50%;
      }
    }
    .copy {
      margin-left: 15px;
      padding: 5px 20px;
      background-color: #f1f1f1;
      border-radius: 20px;
      font-size: 12px;
      cursor: pointer;
    }
  }
</style>
